<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>mloader</title>
		<script src="js/mloader.js"></script>
		<script>
			function getList1() {
				return [1, 2, 3, 4];
			}

			function getList2() {
				return [{
						city: {
							city1: "长沙",
							city2: "岳阳"
						},
						pro: "湖南",
						b1: true,
						b2: true,
						b3: false
					},
					{
						city: {
							city1: "武汉",
							city2: "咸宁"
						},
						pro: "湖北",
						b1: false,
						b2: false,
						b3: false
					}
				];
			}
			var data1 = {
				content: "你好，我是模板！",
				booleanTest0: false,
				booleanTest01: false,
				booleanTest02: false,
				booleanTest1: true,
				booleanTest2: true,
				booleanTest3: false,
				listTest1: getList1(),
				listTest2: getList2()
			};
		</script>
	</head>

	<body>
		<!-- 
			1.class的值是固定值，固定为mloader-template
			2.url为模板的位置
			3.data的值跟script里面定义的json变量的值保持一致
		-->
		<!--<div class="mloader-template" url="template/demo-template.html" data='data1'></div>-->
		<button onclick="ck1()">click1</button>
		<button onclick="ck2()">click2</button>
		<div id="test1"></div>
		<div id="test2"></div>
	</body>
	<script>
		function ck1() {
			var htmlTag = document.getElementById("test1");
			//var htmlTag = document.getElementsByTagName("body")[0];
			htmlTag.innerHTML = "<div class=\"mloader-template\" url=\"template/demo-template.html\" data='data1'></div>";
			reloader();
		}

		function ck2() {
			var htmlTag = document.getElementById("test2");
			//var htmlTag = document.getElementsByTagName("body")[0];
			htmlTag.innerHTML = "111";
		}
	</script>

</html>